<template>
    <split-horizontal>
        <template v-slot:header-p>
            <div class="j-title">
                带@功能的输入框（JMention）
                <div class="j-detail">带@功能的输入框，支持版本 ^0.9.1</div>
            </div>
        </template>
        <template v-slot:left-p>
            <div class="content" style="width: 100%; padding: 1rem">
                <JMention
                    style="
                        width: 90%;
                        height: 80%;
                        border: 1px #0d0d0d solid;
                        border-radius: 0.5em;
                        padding: 0.5em;
                        font-size: 1.2em;
                        line-height: 1.5em;
                    "
                    :userList="userList"
                    :menuStyle="menuStyle"
                    :atTextStyle="atTextStyle"
                    :menuItemStyle="menuItemStyle"
                    :noDataItemStyle="menuItemStyle"
                    :menuItemActiveStyle="menuItemActiveStyle"
                    :initSelectId="initSelectId"
                    @update:selectedList="updateSelectedList"
                    v-model="value"
                >
                </JMention>
                <div>
                    提到的用户：
                    <span
                        v-for="(item, index) in selectedList"
                        :key="item.id + item.name + index"
                    >
                        {{ index === 0 ? "" : "、"
                        }}<span style="color: skyblue">{{ item.name }}</span>
                    </span>
                </div>
            </div>
        </template>
        <template v-slot:right-p>
            <div>
                <j-table :title="tableTitle" :tableData="tableData"> </j-table>
            </div>
        </template>
        <template v-slot:footer-p>
            <pre v-highlight>
                <code class="vue">
                    <div v-text="code"></div>
                </code>
            </pre>
        </template>
    </split-horizontal>
</template>
<script>
import { mixinForView } from "@/mixins/index.js";
export default {
    name: "JMentionView",
    components: {},
    mixins: [mixinForView],
    data() {
        return {
            code: "",
            tableData: [],
            userList: [
                {
                    id: 1,
                    name: "张三",
                },
                {
                    id: 2,
                    name: "李四",
                },
                {
                    id: 3,
                    name: "王五",
                },
                {
                    id: 4,
                    name: "赵六",
                },
                {
                    id: 5,
                    name: "tom",
                },
                {
                    id: 6,
                    name: "jerry",
                },
                {
                    id: 7,
                    name: "jack",
                },
                {
                    id: 8,
                    name: "lucy",
                },
            ],
            value: "123@张三456@李四789@王五",
            menuStyle: "",
            menuItemStyle: "",
            menuItemActiveStyle: "",
            noDataItemStyle: "",
            atTextStyle: "",
            isContain: true,
            initSelectId: ["1", "2"],
            selectedList: [],
        };
    },
    created() {
        this.initTableData();
        this.initCodeContent();
    },
    mounted() {},
    methods: {
        updateSelectedList(newList) {
            this.selectedList = newList;
        },
        initCodeContent() {
            this.code = `
<template>
    <JMention
        style="
            width: 90%;
            height: 80%;
            border: 1px #0d0d0d solid;
            border-radius: 0.5em;
            padding: 0.5em;
            font-size: 1.2em;
            line-height: 1.5em;
        "
        :userList="userList"
        :menuStyle="menuStyle"
        :atTextStyle="atTextStyle"
        :menuItemStyle="menuItemStyle"
        :noDataItemStyle="menuItemStyle"
        :menuItemActiveStyle="menuItemActiveStyle"
        :initSelectId="initSelectId"
        @update:selectedList="updateSelectedList"
        v-model="value"
    >
    </JMention>
    <div>
        提到的用户：
        <span
            v-for="(item, index) in selectedList"
            :key="item.id + item.name + index"
        >
            {{ index === 0 ? "" : "、"
            }}<span style="color: skyblue">{{ item.name }}</span>
        </span>
    </div>
</template>

export default {
    data() {
        return {
            userList: [
                {
                    id: 1,
                    name: "张三",
                },
                {
                    id: 2,
                    name: "李四",
                },
                {
                    id: 3,
                    name: "王五",
                },
                {
                    id: 4,
                    name: "赵六",
                },
                {
                    id: 5,
                    name: "tom",
                },
                {
                    id: 6,
                    name: "jerry",
                },
                {
                    id: 7,
                    name: "jack",
                },
                {
                    id: 8,
                    name: "lucy",
                },
            ],
            value: "123@张三456@李四789@王五",
            menuStyle: "",
            menuItemStyle: "",
            menuItemActiveStyle: "",
            noDataItemStyle: "",
            atTextStyle: "",
            isContain:true,
            selectedList: [],
            initSelectId: ["1", "2"],
        };
    },
    methods:{
        updateSelectedList(newList) {
            this.selectedList = newList;
        },
    }
}
            `;
        },
        initTableData() {
            this.tableData = [
                {
                    parameter: "userList",
                    field: "@备选列表",
                    type: "Array",
                    describe:
                        "数组对象，每个对象必须包含id和name属性，点击左边箭头可展开查看例子",
                    children: {
                        type: "text",
                        text: "[{id: 1, name: '张三'}, {id: 2, name: '李四'}, {id: 3, name: '王五'}]",
                    },
                },
                {
                    parameter: "canRepeat",
                    field: "是否可以重复@同一用户",
                    type: "Boolean",
                    describe: "默认为false，即被@的用户不会再出现在备选列表中",
                },
                {
                    parameter: "atTextStyle",
                    field: "@文本样式",
                    type: "String",
                    describe:
                        "被@的文本样式，可自定义样式，也可直接修改.j-mention-at",
                },
                {
                    parameter: "menuStyle",
                    field: "@备选菜单样式",
                    type: "String",
                    describe:
                        "菜单样式，可自定义样式，也可直接修改.dropdown-list样式",
                },
                {
                    parameter: "menuItemStyle",
                    field: "@备选菜单选项样式",
                    type: "String",
                    describe:
                        "菜单选项样式，可自定义样式，也可直接修改.dropdown-list-li样式",
                },
                {
                    parameter: "menuItemActiveStyle",
                    field: "@备选菜单选项激活样式",
                    type: "String",
                    describe:
                        "菜单选项激活样式，可自定义样式，也可直接修改.dropdown-list-li-active样式",
                },
                {
                    parameter: "noDataItemStyle",
                    field: "@备选菜单无数据项样式",
                    type: "String",
                    describe:
                        "菜单无数据项样式，可自定义样式，也可直接修改.dropdown-list-nodata样式",
                },
                {
                    parameter: "isContain",
                    field: "@备选菜单是否只在输入框内显示",
                    type: "Boolean",
                    describe:
                        "默认为true，即@备选菜单只会在输入框内显示，false则可以溢出输入框",
                },
                {
                    parameter: "initSelectId",
                    field: "初始化选中的用户id",
                    type: "Array",
                    describe:
                        "如：['1', '2']，需搭配value使用，value中的@用户会被选中",
                },
            ];
        },
    },
};
</script>
<style lang="less" scoped>
.title {
    font-size: x-large;
    text-align: left;
    margin-bottom: 1rem;
    .detail {
        font-size: medium;
        color: dimgrey;
        margin-top: 1rem;
    }
}
.content {
    margin: auto auto;
    height: 40vh;
    overflow-y: scroll;
    // width: 50%;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #fafafa;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgb(191, 191, 191);
    }

    // 较新的 API
    body {
        scrollbar-width: thin;
        scrollbar-color: #718096 #edf2f7;
    }
}
.header {
    min-height: 4rem;
    text-align: center;
}
.footer {
    margin-top: 2rem;
    margin-left: 2%;
    width: 95%;
}
</style>
